import React = require('react')
import { RouteComponentProps } from 'react-router'
import Nav from '../../components/nav'
import moment from 'moment'
import style from './style.less'

let now = moment().format('YYYY-MM-DD HH:mm:ss');
export default class Open extends React.Component<RouteComponentProps, any>{
  constructor(props) {
    super(props)
    this.state = {
      key: '',
      name: '',
      content: '',
      time: '',
      tip: '',
      flag: "none",
      s: 0
    }
  }

  timeDiff(time) { return moment(time).diff(moment().format("YYYY-MM-DD HH:mm:ss"), "seconds") }
  render() {
    return (
      <>
        <Nav />
        <div className="container">
          <h1 className="page-header">打开胶囊</h1>
          <div className="main">
            <form method="post">
              <label>
                胶囊Key：
                <input name="key" className="key" type="text"
                  value={this.state.key}
                  onChange={(e) => this.setState({
                    key: e.target.value
                  })}
                />
                <input type="button" id="openpill" value="打开胶囊"
                  onClick={async () => {
                    if (this.state.key) {
                      console.log("async");
                      let res = await fetch('http://127.0.0.1:3280/api/get', {
                        method: 'POST',
                        body: JSON.stringify({
                          id: this.state.key
                        })
                      })
                      let ifo = await res.json()
                      console.log(ifo);
                      if (ifo.stat != "not_found") {
                        this.setState(
                          {
                            name: ifo.name,
                            time: ifo.time,
                            content: ifo.content,
                            tip: ifo.tip,
                            flag: "found"
                          }
                        )
                        let s=this.timeDiff(this.state.time)-1;
                        if (s > 0)
                          setInterval(() => {
                            s--;
                            this.setState({ s: s}
                            )
                            if (this.state.s-1== 0)
                              clearInterval()
                          }, 1000)
                      } else {
                        this.setState({
                          flag:"not_found"
                        })
                      }
                    }
                  }}
                />
              </label>
            </form>
            <div className={(this.state.flag=="not_found") ? (style.tips_highlight) : (style.closepill)}>没有这个胶囊Key</div>
            <div className={(this.state.flag=="found") ? (style.openpill) : (style.closepill)}>
              <h2 className={this.timeDiff(this.state.time) > 0 ? (style.openpill) : (style.closepill)}>这颗胶囊未到提取时间，不能打开。</h2>
              <h2 className={this.timeDiff(this.state.time) < 0 ? (style.openpill) : (style.closepill)}>{this.state.name} 在 {this.state.time} 想对你说：</h2>
              <span className={this.timeDiff(this.state.time) > 0 ? (style.openpill) : (style.closepill)}>打开时间在 <b>{this.state.time}</b>，距离现在 <b>{this.state.s}</b> 秒。</span>
              <div className={style.content}>
                <p className={this.timeDiff(this.state.time) > 0 ? (style.openpill) : (style.closepill)}><b>{this.state.name}</b> 给你留的提示信息：</p>
                <pre>{this.timeDiff(this.state.time) < 0 ? (this.state.content) : (this.state.tip)}</pre>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
}
